<template>
  <div class="container resourceList">
    <div class="handle-box">
        <span class="frist-serarch-title">标题名称：</span>
        <el-input
          v-model="query.keyword"
          placeholder="标题名称"
          class="handle-serarch-input"
          @keyup.enter.native="initAjaxMethod"
        ></el-input>
        <span class="handle-serarch-title">拍摄时间：</span>
        <el-date-picker
          v-model="query.shooting_time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="initAjaxMethod"
        >
        </el-date-picker>
        <span style="padding: 8px"></span>
        <el-button
          type="success"
          size="medium"
          icon="el-icon-search"
          @click="handleSearch()"
          >搜索</el-button
        >
        <el-button
          type="warning"
          size="medium"
          icon="el-icon-refresh-left"
          @click="resultClick()"
          >重置</el-button
        >
      </div>
      <el-collapse v-model="collapseName" accordion>
        <el-collapse-item title="类目检索(可收起)" name="1">
          <div class="tag-serarch-group">
            <div class="tag-serarch-list"> 
              <div class="tag-serarch-title">文件类型:</div>
              <div class="tag-serarch-checkbox">
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="fileTypeCheckAllChange">全选</el-checkbox>
                  <div style="margin: 15px 0;"></div>
                  <el-checkbox-group v-model="checkedFileType" @change="fileTypeCheckedCitiesChange"> 
                    <el-checkbox :label="1">视频</el-checkbox>
                    <el-checkbox :label="0">图片</el-checkbox>
                  </el-checkbox-group>
              </div>
            </div>
            <div class="tag-serarch-list" v-for="(item,index) in searchList" :key="index"> 
              <div class="tag-serarch-title">{{item.title}}:</div> 
              <div class="tag-serarch-checkbox">
                  <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="(e)=>handleCheckAllChange(e,index)">全选</el-checkbox> 
                  <div style="margin: 15px 0;"></div>
                  <el-checkbox-group v-model="item.checkResult" @change="(e)=>handleCheckedCitiesChange(e,index)">
                    <el-checkbox :label="val.id" v-for="(val,key) in item.children" :key="index+'-'+key">{{val.title}}</el-checkbox>
                  </el-checkbox-group>
              </div>
            </div>
            <div class="tag-serarch-list"> 
              <div class="tag-serarch-title">已选条件:</div>
              <div class="tag-serarch-checkbox">
                  <el-tag closable style="margin:0 10px 10px 0"  v-for="(item,index) in tagList" :key="index" @close="handleClose(item,index)">{{item.name}}</el-tag>
                  <el-button size="mini" round @click="handleClose('all')" v-show="tagList.length>0">全部清除</el-button>
              </div>
            </div>
          </div>
      </el-collapse-item>
    </el-collapse>
    <div class="handle-box" style="display: flex">
        <div class="sort-title">综合排序</div>
        <div class="sort-group" @click="sortMethod(1)">
          <span>拍摄时间</span>
          <i class="el-icon-sort-down" :class="[query.shooting_time_sort === 'desc'?'sort-active':'']"></i> 
          <i class="el-icon-sort-up" :class="[query.shooting_time_sort === 'asc'?'sort-active':'']"></i>
        </div>
        <div class="sort-group" @click="sortMethod(2)">
          <span>下载次数</span>
          <i class="el-icon-sort-down" :class="[query.download_num_sort === 'desc'?'sort-active':'']"></i>
          <i class="el-icon-sort-up" :class="[query.download_num_sort === 'asc'?'sort-active':'']"></i>
        </div>
      </div>
    <div class="main">
			<div class="traingplan">
				<dl v-for="(item, index) in tableData" :key="index" class="traingplan-group">
					<dt>
            <div class="traingplan-img-group" @click="goToDetail(item)">
              <img style="filter: blur(15px);z-index:2" :src="item.cover_image" v-if="item.cover_image" />
              <img style="z-index:3; object-fit:contain" :src="item.cover_image" v-if="item.cover_image" />
              <img src="../../assets/img/mrt.png" v-if="!item.cover_image" /> 
              <span class="traingplan-nums">
                <el-tag size="mini">共{{item.file_num}}{{item.type == 0?'张':'段'}}</el-tag>
              </span>
            </div>
            <p style="padding:8px 10px;font-size:16px;color:#333;font-weight:bold;" class="traingplan-title">
              <el-tag type="success" size="mini" v-if="item.type == 0">图片</el-tag>
              <el-tag type="warning" size="mini" v-if="item.type == 1">视频</el-tag>
              {{item.title}}</p>
            <p class="traingplan-content">{{item.content}}</p>
            <p style="display:flex;align-items: center;justify-content: space-between;padding:8px 10px;font-size:14px;color:#888;">
              <span>{{item.shooting_time}}</span>
              <span>下载：{{item.download_num  || 0}}</span>
            </p>
					</dt>
				</dl>
        </div>
        <not-find v-if="tableData.length == 0"></not-find>
        <div class="pagination">
                <el-pagination
                    layout="sizes,total, prev, pager, next, jumper"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :page-sizes="[12, 24, 48, 96, 92]"
                    @size-change="handleSizeChange"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
      </div>
    
  </div>
</template>
<script>
import notFind from "@/view/common/notFind";
export default {
  name: "resourceList",
  components: {
    notFind,
  },
  data() {
    return {
      searchList: [],
      tableData: [],
      tagList: [],
      pageTotal:0,
      keyword:'',
      collapseName:'1',
      error: false,
      query: {
        type: '',
        shooting_time: [],
        pageIndex: 1,
        pageSize: 12,
        keyword: "",
        shooting_time_sort:'desc',
        download_num_sort:'',
        cate_ids:''
      },
      checkedFileType:[],
      checkAll: false,
      isIndeterminate: false
    };
  },
  activated(){
    let ifDoFresh=window.sessionStorage.getItem('jqjtIsBack');
    if(ifDoFresh == 1){
      this.resultClick()
      this.otherAjaxMethod();
    }else{
      this.initAjaxMethod();
    }
  },
  watch:{
    tagList:function(val){
      let cate_ids=[],query=[];
      val.forEach(item=>{
        if(item.type == 'fileType'){
          query.push(item.id);
        }else{
          cate_ids.push(item.id);
        }
      })
      this.query.cate_ids=cate_ids.length>0?cate_ids.join(','):'';
      this.query.type=query.length==1?query[0]:'';
      this.initAjaxMethod();
    }
  },
  methods: {
    fileTypeCheckAllChange(val){
      this.checkedFileType = val ? [0,1] : [];
      this.isIndeterminate = false;
      this.changeCheckTag();
    },
    fileTypeCheckedCitiesChange(value) {
      this.checkAll = value.length === 2?true:false;
      this.isIndeterminate = value.length > 0 && value.length < 2;
      this.changeCheckTag();
    },
    handleCheckAllChange(val,index){
      const childIds=Array.isArray(this.searchList[index].children)?this.searchList[index].children.map(item=>item.id):[];
      this.searchList[index].checkResult=val?childIds:[];
      this.searchList[index].isIndeterminate=false;
      this.changeCheckTag();
    },
    handleCheckedCitiesChange(value,index){
      this.searchList[index].checkAll=value.length === this.searchList[index].children.length?true:false;
      this.searchList[index].isIndeterminate=value.length > 0 && value.length < this.searchList[index].children.length;
      this.changeCheckTag();
    },
    changeCheckTag(){
      const fileTypeList=[{name:'图片',id:0,type:'fileType'},{name:'视频',id:1,type:'fileType'}];
      let checkFiles=[],checkTags=[];
      this.checkedFileType.forEach(item=>{
        fileTypeList.forEach(val=>{
          if(item == val.id){
            checkFiles.push(val)
          }
        })
      })

      this.searchList.forEach(item=>{
        if(Array.isArray(item.children)){
          item.children.forEach(child=>{
            item.checkResult.forEach(val=>{
              if(val == child.id){
                checkTags.push({name:child.title,id:child.id,type:'tag'})
              }
            })
          })
        }
      })
      this.tagList=[...checkFiles,...checkTags];
    },
    handleClose(data,index=0){
      if(data == 'all'){
        this.checkedFileType=[];
        this.checkAll=false;
        this.isIndeterminate=false;
        this.searchList.forEach(item=>{
          item.checkResult=[];
          item.checkAll=false;
          item.isIndeterminate=false;
        })
        this.tagList=[];
      }else{
        if(data && data.type == 'fileType'){
          let fIndex=-1;
          this.checkedFileType.forEach((item,index)=>{
            if(item == data.id){
              fIndex=index;
            }
          })
          if(fIndex>=0){
            this.checkedFileType.splice(fIndex,1);
            this.checkAll=false;
            this.isIndeterminate=this.checkedFileType.length>0?true:false;
          }
        }

        if(data && data.type == 'tag'){
          let tIndex=-1,pIndex=-1;
          this.searchList.forEach((item,index)=>{
            if(Array.isArray(item.checkResult)){
              item.checkResult.forEach((val,key)=>{
                if(val == data.id){
                  item.checkAll=false;
                  item.isIndeterminate=item.checkResult.length-1>0?true:false;
                  pIndex=index;
                  tIndex=key;
                }
              })
            }
          })
          if(tIndex>=0){
             this.searchList[pIndex].checkResult.splice(tIndex,1);
          }
        }
        this.tagList.splice(index,1);
      }
    },
    handleSizeChange(val) {
      this.query.pageSize=val;
      this.initAjaxMethod();
    },
    handlePageChange(val){
      this.query.pageIndex=val;
      this.initAjaxMethod();
    },
    goToDetail(data){
      this.$router.push({path:'/resourceEdit',query:{id:data.id,type:1}})
    },
    handleSearch(){
      this.query.pageIndex=1;
      this.initAjaxMethod();
    },
    resultClick(){
      this.query={
        type: false,
        shooting_time: [],
        pageIndex: 1,
        pageSize: 12,
        keyword: "",
        shooting_time_sort:'desc',
        download_num_sort:'',
        cate_ids:''
      };
      this.handleClose('all');
    },
    sortMethod(flag){
      let {shooting_time_sort,download_num_sort}=this.query,
      shooting='',
      create='';
      if(flag == 1){
        if(shooting_time_sort == ''){
          shooting='desc';
        }else{
          shooting=shooting_time_sort === 'asc'?'desc':'asc';
        }
        create='';
      }else{
        if(download_num_sort == ''){
          create='desc';
        }else{
          create=download_num_sort === 'asc'?'desc':'asc';
        }
        shooting='';
      }
      this.query.shooting_time_sort=shooting;
      this.query.download_num_sort=create;
      this.initAjaxMethod();
    },
    //列表加载
    initAjaxMethod() {
      this.$http
        .post(this.$API.MEDIA_INDEX, {
          page: this.query.pageIndex,
          listRows: this.query.pageSize,
          title: this.query.keyword,
          type: this.query.type==-1?'':this.query.type,
          shooting_time: Array.isArray(this.query.shooting_time) && this.query.shooting_time.length>1?this.query.shooting_time.join('~'):'',
          shooting_time_sort:this.query.shooting_time_sort,
          download_num_sort:this.query.download_num_sort,
          cate_ids:this.query.cate_ids
        })
        .then((res) => {
          // console.log("媒资列表", res);
          if (res.code == 1) {
            this.tableData=Array.isArray(res.data.data)?res.data.data:[];
            this.pageTotal=res.data.total;
          }
        })
    },
    otherAjaxMethod(){
      this.$http.post(this.$API.RESOURCE_SEARCH_INDEX)
        .then((res) => {
          if (res.code == 1) {
            let list = Array.isArray(res.data) ? res.data : [];
            list.forEach(item=>{
              item.checkResult=[];
              item.checkAll=false;
              item.isIndeterminate=false;
            })
            this.searchList = list;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    }
  },
};
</script>
<style lang="less" scoped>
.serarch-group {
  padding: 20px 10%;
}
.traingplan {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.traingplan .traingplan-group {
  width: 16.66%;
  padding:10px;
  box-sizing: border-box;
  min-width: 260px;
}
.traingplan dt {
  background: #ffffff;
  box-shadow: 0 12px 20px 0 rgba(0,0,0,.2);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0;
}
.traingplan dt:hover{
  cursor: pointer;
  box-shadow:1px 1px 8px 4px rgba(0, 0, 0, 0.4);
}
.traingplan dl{
  width:100%;
  position:relative;
}
.traingplan dl img {
  width: 100%;
  height: 100%;
  position:absolute;
  top:0;
  left:0;
}
.traingplan dd {
  margin-top: 5px;
  font-size: 13px;
}
.title{
  font-size: 14px;
  color:#333;
  font-weight: bold;
  padding:8px;
}
.title_bewteen{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-switch {
  float: right;
}
.traingplan-img-group{
  position: relative;
  height:160px;
  overflow: hidden;
}
.traingplan-img-group:hover .traingplan-hover{
  display: flex;
}
.traingplan-content{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				//溢出内容隐藏
	text-overflow: ellipsis;		//文本溢出部分用省略号表示
	display: -webkit-box;			//特别显示模式
	-webkit-line-clamp: 2;			//行数
	line-clamp: 2;					
	-webkit-box-orient: vertical;	//盒子中内容竖直排列
  height:40px;
  line-height:20px;
  font-size:14px;
  color:#888;
  padding:0 10px;
}
.traingplan-hover{
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  font-size: 16px;
  color:#fff;
}
p{
  margin:0;
}
.main{
  
}
.container{
  padding:30px;
}
.sort-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.sort-group {
  display: flex;
  align-items: center;
  margin-left: 30px;
  font-size: 14px;
}
.sort-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.sort-group {
  display: flex;
  align-items: center;
  margin-left: 30px;
  font-size: 14px;
}
.sort-group:hover{
  cursor: pointer;
}
.sort-group:hover span{
  color:#409EFF;
}
.sort-group i{
  font-weight: bold;
}
.sort-active{
  color:#409EFF;
}
.tag-serarch-group{
  border-top:1px solid #eee;
  border-left:1px solid #eee;
  border-right:1px solid #eee;
  border-radius: 4px;
}
.tag-serarch-list{
  display: flex;
  padding:15px 0;
  border-bottom:1px solid #eee;
} 
.tag-serarch-title{
  font-size: 14px;
  color:#888;
  line-height: 20px;
  text-align: right;
  width: 80px;
  font-weight: bold;
} 
.tag-serarch-checkbox{
  padding-left:20px;
  flex:1;
}
.traingplan-title{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.traingplan-nums{
  position: absolute;
  bottom:0;
  right:0;
  z-index: 100;
}
</style>
<style>
  .resourceList .el-collapse-item__header{
    font-size:14px;
    font-weight:bold;
  }
</style>

